<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Recos</title>
  <meta name="description" content="Recos">
  <meta name="keywords" content="Recos">
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <link rel="stylesheet" href="../plugins/elementui/index.css">
  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../css/sidebar.css">
  <link href="../plugins/quill/quill.snow.css" rel="stylesheet">
  <link href="../plugins/quill/quill.bubble.css" rel="stylesheet">
  <link href="../plugins/quill/quill.core.css" rel="stylesheet">
  <script src="../plugins/quill/quill.js"></script>

</head>
<body class="hold-transition">

<div id="app" class="app">
<!--  <iframe src="sidebar.html"></iframe>-->
  <!-- 使用JavaScript加载侧边栏内容 -->
  <div id="sidebar-container"></div>

  <!-- 其他内容 -->
  <script>
    // 使用JavaScript加载侧边栏内容
    const sidebarContainer = document.getElementById("sidebar-container");
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "sidebar.html", true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        sidebarContainer.innerHTML = xhr.responseText;
      }
    };
    xhr.send();
  </script>
  <div id="page-container">

    <div class="content-header">
      <h1 aria-label="center">Recos-历史版本管理</h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }"></el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="app-container">
      <div class="box">

        <div><h3 aria-label="center">历史版本配置</h3></div>
        <div>
          dataId查询<el-input v-model="dataIdInput" style="width: 280px"   placeholder="请输入内容"></el-input>
          groupId查询<el-input v-model="groupIdInput" style="width: 280px"   placeholder="请输入内容"></el-input>


          <el-button type="primary" @click="selectHisConfigInfo">查询</el-button>
          <el-button type="danger" @click="deleteConfigInfo">X</el-button>

          <el-button type="primary" @click="showMoreSelect">高级查找</el-button>

          <div class="show-more-select" v-if="moreSelect">
            <br>
            app Name查询<el-input  v-model="appNameInput" style="width: 280px" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <el-table  size="small" current-row-key="id"
                   :data="dataList2" stripe highlight-current-row
                   :cell-style="cellStyle"
                   @selection-change="handleSelectionChange2">
          <el-table-column
                  type = 'selection'
                  label="是否选中"
                  width="45"
                  prop="id">
          </el-table-column>
          <el-table-column width="220" label="data Id" align="center" prop="dataId" ></el-table-column>
          <el-table-column width="100" label="Group" align="center" prop="groupId" ></el-table-column>
          <el-table-column width="100" label="归属应用" align="center" prop="appName" ></el-table-column>
          <el-table-column width="220" label="创建时间" align="center" prop="gmtCreate" ></el-table-column>
          <el-table-column width="100" label="操作人" align="center" prop="srcUser" ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button slot="reference" type="primary" size="mini" prop="href"  @click="selectDetail(scope.row)">详情</el-button>
              <el-button slot="reference" type="primary" size="mini" prop="href"  @click="rollBack(scope.row)">回滚</el-button>
              <el-button slot="reference" type="danger" size="mini" prop="href"  @click="deleteConfig(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
                  class="pagiantion2"
                  @current-change="handleCurrentChange2"
                  :current-page="pagination2.currentPage"
                  :page-size="pagination2.pageSize"
                  layout="total, prev, pager, next, jumper"
                  :total="pagination2.total">
          </el-pagination>
        </div>

      </div>
    </div>
  </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../plugins/elementui/index.js"></script>


<script src="../plugins/quill/vue-quill-editor.js"></script>
<script src="../js/token.js"></script>
<script>


  var vue = new Vue({
    el: '#app',
    data:{
      textarea: '',
      appNameInput:'',
      dataIdInput:'',
      groupIdInput:'',
      moreSelect:false,
      pagination2: {//分页相关模型数据
        appName:'',
        dataId:'',
        groupId:'',
        gmtCreate:'',
        gmtModified:'',
        currentPage: 1,//当前页码
        pageSize:5,//每页显示的记录数
        total:0,//总记录数
        queryString:null,//查询条件
      },
      dataList2: [
        {
          "dataId":'app-dev.yml',
          "group": "default",
          "appName": "app"
        }
      ],
      ids2: [],
      recosConfigInfoPath: "/recos/hisconfiginfo"
    },
    //钩子函数，VUE对象初始化完成后自动执行
    created() {
      if (!getToken() || getToken()==''){
        window.location.href="./login.html"

      }
      this.initPage();
    },
    methods: {
      initPage() {
        function getQueryString(name) {
          let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
          let r = window.location.search.substr(1).match(reg);
          if (r != null) {
            return decodeURIComponent(r[2]);
          };
          return null;
        }
        this.pagination2.dataId=getQueryString("dataId")
        this.pagination2.groupId=getQueryString("groupId")
        this.findPage2();
      },
      selectHisConfigInfo(){
        this.pagination2.dataId=this.dataIdInput;
        this.pagination2.groupId=this.groupIdInput;
        this.pagination2.appName=this.appNameInput;
        this.findPage2()
      },
      showMoreSelect(){
        this.moreSelect==false?this.moreSelect=true:this.moreSelect=false
      },
      deleteConfigInfo(){
        this.deleteConfigBatch(this.ids2);
      },
      deleteConfigBatch(ids){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(this.recosConfigInfoPath+"/delete",ids,getAxiosConfig()).then((res)=>{
            if (res.data.success){
              alert(res.data.msg)
              this.findPage2()
            }else if (res.data.code==-555){
              window.location.href="./login.html";
            }
          }).catch((error)=>{
            if (error == "Error: Request failed with status code 403"){
              this.$message.error("无操作权限");
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      deleteConfig(row){
        //跳转到服务详情页
        var ids=new Array();
        ids.push(row.id);
        this.deleteConfigBatch(ids);
      },

      findPage2() {
        axios.post(this.recosConfigInfoPath+"/list",this.pagination2,getAxiosConfig()).then((res)=>{
          if (res.data.success){
            this.dataList2 = res.data.data.list;
            this.pagination2.total = res.data.data.total;
          }else if (res.data.code==-555){
            window.location.href="./login.html";
          }
        }).catch((error)=>{
          if (error == "Error: Request failed with status code 403"){
            this.$message.error("无操作权限");
          }
        });

      },

      handleCurrentChange2(currentPage) {
        this.pagination2.currentPage = currentPage;
        this.findPage2();
      },

      handleSelectionChange2:function(val) {
        //多选框选中
        this.ids2=new Array();
        for(var i=0;i<val.length;i++){
          this.ids2.push(val[i].id);
        }
      },
      selectDetail(row){
        // console.log(row.appName +" ....===><")
        //跳转到服务详情页
        window.open("/pages/edit_config_details.html?id="+row.id+"&his=1");
      },
      rollBack(row){
        //回滚
        this.$confirm('确定回滚吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.get(this.recosConfigInfoPath+"/rollback/"+row.id,getAxiosConfig()).then((res)=>{
            if (res.data.success){
              alert(res.data.msg)
            }else if (res.data.code==-555){
              window.location.href="./login.html";
            }
          }).catch((error)=>{
            if (error == "Error: Request failed with status code 403"){
              this.$message.error("无操作权限");
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消回滚'
          });
        });

      },

    }
  });
  Vue.use(window.VueQuillEditor);
</script>
<style>
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>
</html>